<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>矩形的绘制和编辑</title>
    <style>
        html,
        body,
        #container {
            width: 100%;
            height: 100%;
        }
    </style>
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
    <script
        src="https://webapi.amap.com/maps?v=1.4.15&key=200a45d053a0212a4d36141897d47155&plugin=AMap.RectangleEditor"></script>
    <script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
</head>

<body>
    <div id="container"></div>
    <div class="input-card" style="width: 120px">
        <button class="btn" onclick="rectangleEditor.open()" style="margin-bottom: 5px">开始编辑</button>
        <button class="btn" onclick="rectangleEditor.close()">结束编辑</button>
    </div>
    <script>
        var map = new AMap.Map('container', {
            zoom: 13
        });

        var southWest = new AMap.LngLat(112.934257, 28.228983)
        var northEast = new AMap.LngLat(112.935673, 28.227536)

        var bounds = new AMap.Bounds(southWest, northEast)

        var rectangle = new AMap.Rectangle({
            bounds: bounds,
            strokeOpacity: 0.5,
            strokeDasharray: [30, 10],
            // strokeStyle还支持 solid
            strokeStyle: 'Solid line',
            fillColor: 'blue',
            fillOpacity: 0.5,
            cursor: 'pointer',
            zIndex: 50,
        })


        rectangle.setLabel({
            content: isPointInRing ? '内部' : '外部',
            offset: new AMap.Pixel(20, 0)
        });


        var isContain = rectangle.contains('112.937015,28.229404')
        console.info(isContain)
        rectangle.setMap(map)
        // 缩放地图到合适的视野级别
        map.setFitView([rectangle])


    </script>
</body>

</html>